<html>
<title>观察者模式-2ojd对象</title>
<style>
 div{ width: 200px;height: 50px; border: 1px solid #ccc;}
</style>

<body>
    <select name="sel" id="sel">
        <option value="0">男式风格</option>
        <option value="1">女式风格</option>
    </select>
	
	   <input type="button" onclick="drop()" value="不引起广告的变化">
	   <br/>
	   <br/>
	   <br/>
	   <h1>面向过程,观察者模式来切换</h1>

    <div id="test1">11</div>
    <div id="test2">22</div>
    <div id="test3">广告</div>
</body>
<script>




    var sel = document.getElementById('sel');
    sel.observes = {};
    //添加一个观察者
    sel.attach = function(key,obj) {
console.log(key)	;
console.log(obj);	
		sel.observes[key]=obj
		console.log(sel.observes);
    }
    //删除一个观察者
    sel.detach = function(key) {
       delete sel.observes[key]
    }
    //onchange 改变的时候通知
    sel.onchange = sel.notify = function() {
        for (var key in this.observes) {
            //循环通知 需要改变的   
            this.observes[key].update(this);
        }
    }
    //需要改变的
    var test2 = document.getElementById('test2');
    test2.update = function(observes) {
        if (observes.value == '1') {
            this.innerHTML = '化妆品';
        } else if (observes.value == '0') {
            this.innerHTML = '汽车 机械';
        }
    }
    test3.update = function(observes) {
        if (observes.value == '1') {
            this.innerHTML = 'test3的女 口红';
        } else if (observes.value == '0') {
            this.innerHTML = 'test3的男0 足球';
        }
    }
    sel.attach('test2',test2); //调用改变
    sel.attach('test3',test3);
	
	function drop(){
	 sel.detach('test3');
	}
	
</script>

</html>